<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link type="text/css" href="/dist/tui-image-editor.css" rel="stylesheet" />
    <script type="text/javascript" src="/dist/tui-image-editor.js"></script>
    <style>
      .drawing-container {
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <div class="drawing-container">
      <div id="tui-image-editor"></div>
    </div>
    <script>
      const locale_zh = {
        ZoomIn: '放大',
        ZoomOut: '缩小',
        Hand: '手掌',
        History: '历史',
        Resize: '调整宽高',
        Crop: '裁剪',
        DeleteAll: '全部删除',
        Delete: '删除',
        Undo: '撤销',
        Redo: '反撤销',
        Reset: '重置',
        Flip: '镜像',
        Rotate: '旋转',
        Draw: '画',
        Shape: '形状标注',
        Icon: '图标标注',
        Text: '文字标注',
        Mask: '遮罩',
        Filter: '滤镜',
        Bold: '加粗',
        Italic: '斜体',
        Underline: '下划线',
        Left: '左对齐',
        Center: '居中',
        Right: '右对齐',
        Color: '颜色',
        'Text size': '字体大小',
        Custom: '自定义',
        Square: '正方形',
        Apply: '应用',
        Cancel: '取消',
        'Flip X': 'X 轴',
        'Flip Y': 'Y 轴',
        Range: '区间',
        Stroke: '描边',
        Fill: '填充',
        Circle: '圆',
        Triangle: '三角',
        Rectangle: '矩形',
        Free: '曲线',
        Straight: '直线',
        Arrow: '箭头',
        'Arrow-2': '箭头2',
        'Arrow-3': '箭头3',
        'Star-1': '星星1',
        'Star-2': '星星2',
        Polygon: '多边形',
        Location: '定位',
        Heart: '心形',
        Bubble: '气泡',
        'Custom icon': '自定义图标',
        'Load Mask Image': '加载蒙层图片',
        Grayscale: '灰度',
        Blur: '模糊',
        Sharpen: '锐化',
        Emboss: '浮雕',
        'Remove White': '除去白色',
        Distance: '距离',
        Brightness: '亮度',
        Noise: '噪音',
        'Color Filter': '彩色滤镜',
        Sepia: '棕色',
        Sepia2: '棕色2',
        Invert: '负片',
        Pixelate: '像素化',
        Threshold: '阈值',
        Tint: '色调',
        Multiply: '正片叠底',
        Blend: '混合色',
        Width: '宽度',
        Height: '高度',
        'Lock Aspect Ratio': '锁定宽高比例',
      };

      const customTheme = {
        'common.bi.image': '', // 左上角logo图片
        'common.bisize.width': '0px',
        'common.bisize.height': '0px',
        'common.backgroundImage': 'none',
        'common.backgroundColor': '#f3f4f6',
        'common.border': '1px solid #333',

        'common.normalFill': '#d2d2d2', // 将默认颜色设置为灰色

        // 头
        'header.backgroundImage': 'none',
        'header.backgroundColor': '#f3f4f6',
        'header.border': '0px',

        // 加载图片按钮
        'loadButton.backgroundColor': '#fff',
        'loadButton.border': '1px solid #ddd',
        'loadButton.color': '#222',
        'loadButton.fontFamily': 'NotoSans, sans-serif',
        'loadButton.fontSize': '12px',
        'loadButton.display': 'none', // 隐藏

        // 下载按钮
        'downloadButton.backgroundColor': '#fdba3b',
        'downloadButton.border': '1px solid #fdba3b',
        'downloadButton.color': '#fff',
        'downloadButton.fontFamily': 'NotoSans, sans-serif',
        'downloadButton.fontSize': '12px',
        'downloadButton.display': 'none', // 隐藏

        // 图标
        'menu.normalIcon.color': '#8a8a8a',
        'menu.activeIcon.color': '#555555',
        'menu.disabledIcon.color': '#ccc',
        'menu.hoverIcon.color': '#e9e9e9',
        'submenu.normalIcon.color': '#8a8a8a',
        'submenu.activeIcon.color': '#e9e9e9',

        'menu.iconSize.width': '24px',
        'menu.iconSize.height': '24px',
        'submenu.iconSize.width': '32px',
        'submenu.iconSize.height': '32px',

        // 子菜单颜色
        'submenu.backgroundColor': '#1e1e1e',
        'submenu.partition.color': '#efefef',

        // 子菜单标题
        'submenu.normalLabel.color': '#efefef',
        'submenu.normalLabel.fontWeight': 'lighter',
        'submenu.activeLabel.color': '#fff',
        'submenu.activeLabel.fontWeight': 'lighter',

        // 复选框风格
        'checkbox.border': '1px solid #ccc',
        'checkbox.backgroundColor': '#fff',

        // 区间风格
        'range.pointer.color': '#fff',
        'range.bar.color': '#666',
        'range.subbar.color': '#d1d1d1',

        'range.disabledPointer.color': '#414141',
        'range.disabledBar.color': '#282828',
        'range.disabledSubbar.color': '#414141',

        'range.value.color': '#fff',
        'range.value.fontWeight': 'lighter',
        'range.value.fontSize': '11px',
        'range.value.border': '1px solid #353535',
        'range.value.backgroundColor': '#151515',
        'range.title.color': '#fff',
        'range.title.fontWeight': 'lighter',

        // colorpicker style
        'colorpicker.button.border': '1px solid #1e1e1e',
        'colorpicker.title.color': '#fff',
      };
      let editor = new tui.ImageEditor(document.querySelector('#tui-image-editor'), {
        // 设置默认的填充颜色
        // fillColor: '#aec6cf', // 没用
        includeUI: {
          loadImage: {
            path: 'https://s2.51cto.com/images/blog/202403/18144807_65f7e3a707df826136.jpg',
            name: 'image',
          },
          menu: [
            'resize',
            'flip',
            'mask',
            'crop',
            'rotate',
            'draw',
            'shape',
            'icon',
            'text',
            'filter',
          ],
          // 底部菜单按钮列表 隐藏镜像flip和遮罩mask   隐藏了滤镜 不然可以通过调色隐藏水印 'filter'
          initMenu: 'shape', // 默认打开的菜单项 =形状
          menuBarPosition: 'right', // 菜单所在的位置
          locale: locale_zh, // 本地化语言为中文
          theme: customTheme, // 自定义样式
        },
        // https://nhn.github.io/tui.image-editor/latest/ImageEditor#changeShape
        selectionStyle: {
          // 没用
          cornerStyle: '#ff0000',
          cornerSize: 10,
          cornerColor: '#ffd500',
          cornerStrokeColor: '#5eff00',
          transparentCorners: true, // 透明角落 边角
          lineWidth: 2, // 线宽
          borderColor: '#cccccc', // 边框颜色
          rotatingPointOffset: 80,
        },
        cssMaxWidth: 1000, // canvas 最大宽度
        cssMaxHeight: 800, // canvas 最大高度
        usageStatistics: false, // 发送使用情况
      });
    </script>
  </body>
</html>
